<template>
    <index>
        <div class="login-page">
            <div @keyup.enter.exact="doLogin" class="login-left">
                <div class="login-left-tab">
                    <div
                            :class="active == 0 ? 'login-left-tabs login-left-tabs-checked' : 'login-left-tabs'"
                            @click="active= 0"
                    >密码登录
                    </div>
                    <div class="login-left-line"></div>
                    <div
                            :class="active == 1 ? 'login-left-tabs login-left-tabs-checked' : 'login-left-tabs'"
                            @click="active= 1"
                    >短信登录
                    </div>
                </div>
                <el-input placeholder="请输入手机号" class="theme-input all-input" v-model="params.phone">
                    <img slot="prefix" src="../../assets/img/register/phone.png" height="34px">
                </el-input>
                <div style="display: flex;" :style="{'flex-direction':active==0?'column':'column-reverse'}">
                    <el-input v-if="active == 0" placeholder="请输入密码" show-password
                              class="theme-input" v-model="params.password">
                        <img slot="prefix" src="../../assets/img/register/lock.png" height="29px">
                    </el-input>
                    <el-input
                            v-if="active == 1"
                            placeholder="请输入短信验证码"
                            class="theme-input"
                            v-model="params.code"
                    >
                        <img slot="prefix" src="../../assets/img/register/123.png" height="30px">
                        <el-button
                                slot="suffix"
                                type="text"
                                class="login-left-text-blue"
                                @click="sendCode"
                                :disabled="codeLeftTime!=60">
                            发送验证码
                            <span v-if="codeLeftTime!=60">({{codeLeftTime}})</span>
                        </el-button>
                    </el-input>

                    <div class="identify">
                        <el-col :span="13">
                            <el-input placeholder="图形验证码" class="theme-input input-img-canvas" v-model="imgCode">
                                <img slot="prefix" src="../../assets/img/register/anquan.png" height="30px">
                            </el-input>
                        </el-col>
                        <el-col :span="7">
                            <s-identify :identifyCode="identifyCode"></s-identify>
                        </el-col>
                        <el-col :span="4" class="login-canvas-button">
                            <el-button type="text" @click="refreshCode">
                                看不清
                                <br>换一张
                            </el-button>
                        </el-col>
                    </div>
                </div>
                <div class="login-foget-gray" @click="forgetPass">忘记密码？</div>
                <el-button class="theme-button login-button" @click="doLogin()">登录</el-button>
            </div>
            <div class="login-right">
                <right-image text="还没有账号，" button="立即注册"></right-image>
            </div>
        </div>
    </index>
</template>

<script>
  import index from './index'
  import rightImage from './right-image'
  import validate from '../../assets/utils/validate.js'
  import _g from '../../assets/utils/global.js'
  import SIdentify from './picVerfication'
  import { setTimeout } from 'timers'
  import _subject from '../../assets/utils/subject'

  export default{
    data() {
      return {
        active: 0, //设置默认tab为密码登录
        params: {
          //向后台传送的数据
          phone: '',
          password: '',
          code: ''
        },
        imgCode: '',
        identifyCode: '',
        identifyCodes: '1234567890',
        codeLeftTime: 60 //获取验证码间隔
      }
    },
    methods: {
      check() {
        if (this.params.phone == '' || !validate.isPhone(this.params.phone)) {
          _g.message('请输入正确手机号', 'warning')
          return false
        }
        if (this.active == 0 && this.params.password == '') {
          _g.message('密码不能为空', 'warning')
          return false
        }
        if (this.active == 1 && this.identifyCode != this.imgCode) {
          _g.message('图片验证码不正确', 'warning')
          return false
        }
        return true
      },
      doLogin() {
        if (!this.check()) return false
        if (this.active == 1) {
          let params = {
            phone: this.params.phone,
            yards: this.params.code
          }
          _g.apiPost('/company/loginByPhone.do', params).then(res => {
            _g.toMessage(res)
            if (res.status == 0) {
              this.setUserInfo(res.data)
            }
          })
        } else {
          let params = {
            phone: this.params.phone,
            password: this.params.password
          }
          _g.apiPost('/company/login.do', params).then(res => {
            _g.toMessage(res)
            if (res.status == 0) {
              this.setUserInfo(res.data)
            }
          })
        }
      },
      setUserInfo(info) {
        //设置用户信息到localStorage中
        localStorage.setItem(localSaved.userInfo, JSON.stringify(info))
        _subject.register()
        setTimeout(() => {
          this.$router.push({ path: '/index' }, 600)
        })
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      refreshCode() {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },
      // 生成四位随机验证码
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ]
        }
        // console.log(this.identifyCode)
      },
      forgetPass() {
        //点击忘记密码
        this.$router.push({ path: '/forget' })
      },
      init() {
        let left_time = localStorage.getItem(localSaved.loginTime)
        if (left_time > 0 && left_time != 60) {
          this.codeLeftTime = left_time
          clearInterval(this.settime)
          this.setCodeTime()
        }
      },
      sendCode() {
        //点击发送验证码
        if (!this.check()) {
          return false
        } else {
          _g.apiPost('/company/getSMS.do', { phone: this.params.phone }).then(res => {
            console.log(res)
            _g.toMessage({
              status: res.status,
              msg: res.status == 0 ? '已发送' : '发送失败'
            })
            if (res.status == 0) {
              this.setCodeTime()
            }
          })
        }
      },
      /**
       * @name 设置验证码延时
       */
      setCodeTime() {
        this.settime = setInterval(() => {
          this.codeLeftTime--
          localStorage.setItem(localSaved.loginTime, this.codeLeftTime)
          if (this.codeLeftTime == 0) {
            clearInterval(this.settime)
            this.codeLeftTime = 60
            localStorage.setItem(localSaved.loginTime, this.codeLeftTime)
          }
        }, 1000)
      }
    },
    created() {
      this.makeCode()
      this.init()
    },
    mounted() {
      // 验证码初始化
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    components: {
      SIdentify,
      index,
      rightImage
    }
  }
</script>

<style lang="scss" scoped>
    .input-img-canvas {
        width: 180px !important;
        height: 55px !important;

        input {
            width: 100%;
            height: 100%;
        }
    }

    .code {
        margin: 400px auto;
        width: 68px;
        height: 45px;
        border: 1px solid red;
    }

    .identify {
        width: 360px;
        height: fit-content;
        display: flex;
        align-items: center;
    }
</style>
